<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.sidenav {
				height: 100%;
				width: 250px;
				position: fixed;
				z-index: 1;
				top: 0;
				left: 0;
				background-color: #f5f5f5;
				overflow-x: hidden;
				transition: 0.5s;
				padding-top: 60px;
			}
			
			.sidenav a {
				padding: 8px 8px 8px 32px;
				text-decoration: none;
				font-size: 25px;
				color: #818181;
				display: block;
				transition: 0.3s;
			}
			
			.sidenav a:hover,
			.offcanvas a:focus {
				color: #333;
			}
			
			.sidenav .closebtn {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 36px;
				margin-left: 50px;
				top: 0;
			}
			
			#main {
				transition: margin-left .5s;
				padding: 16px;
				margin-left: 250px;
			}
			
			@media screen and (max-height: 450px) {
				.sidenav {
					padding-top: 15px;
				}
				.sidenav a {
					font-size: 18px;
				}
			}
			
			.title {
				width: 100%;
				height: 50px;
				background: #ccc;
			}
			
			.btn {
				width: 70px;
				height: 30px;
				border-radius: 6px;
				background: #409EFF;
				outline: none;
				color: #fff;
				border: none;
				margin: 20px;
			}
			
			.linner {
				-webkit-appearance: none;
				background-color: #fff;
				background-image: none;
				border-radius: 4px;
				border: 1px solid #dcdfe6;
				box-sizing: border-box;
				color: #606266;
				display: inline-block;
				font-size: inherit;
				height: 40px;
				line-height: 1;
				outline: none;
				padding: 0 15px;
				transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
				width: 100px;
				margin-left: 20px;
			}
			.aside{
				padding: 0 20px;
			}
			.aglign{
				display: inline-block;
				width: 40px;
				text-align: right;
			}
		</style>
	</head>

	<body>
		<script src="js/vue2.5.js"></script>
		<div id="app" class="sidenav">
			<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
			<div class="title"></div>
			<div class="btn-group">
				<button class="btn">加载</button>
				<button class="btn">保存</button>
			</div>
			<div class="aside">
				<p>
					<span class="aglign range">幅度:</span><input @change="monitor" class="linner" type="text" v-model.number="textNumber"/>
				</p>
				x:{{aa}}
				<p>
					<span class="aglign coordinate">x:</span><input class="linner" type="number" :step="textNumber" @change="textLiner" v-model="aa"/>
				</p>
				<p>
					<span class="aglign coordinate">y:</span><input class="linner" type="number" :step="textNumber"/>
				</p>
				<p>
					<span class="aglign coordinate">z:</span><input class="linner" type="number" :step="textNumber"/>
				</p>
				<p>
					<span class="aglign coordinate">编号:</span><input class="linner" type="text"/>
				</p>
			</div>
		</div>

		<div id="main">
			<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 打开</span>
		</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					textNumber :'',
					aa:''
				},
				methods:{
					monitor:function(){
						this.changeText = '';
					},
					textLiner:function(){
						console.log("1");
					}
				}
			})
			//			$(function(){
			//				openNav();
			//			})
			//			function openNav() {
			//				document.getElementById("mySidenav").style.width = "250px";
			//				document.getElementById("main").style.marginLeft = "250px";
			//			}
			//
			//			function closeNav() {
			//				document.getElementById("mySidenav").style.width = "0";
			//				document.getElementById("main").style.marginLeft = "0";
			//			}
		</script>
	</body>

</html>